<template>
  <div>
    御剑乘风来,除魔天地间!
    <hr />
    <MyTable :list="list">
      <template #look="{ obj }">
        {{ obj.id }}
        <button @click="lookHandel(obj)">编辑</button>
        <button @click="del(obj.id)">删除</button>
        <button @click="lookHandel(obj)">添加</button>
      </template>
    </MyTable>

    <DiaLog title="编辑模态框" :showFlag="showFlag">
      <template>
        姓名: <input type="text" v-model="fromData.name" /> <br />
        年龄: <input type="text" v-model="fromData.age" /> <br />
        <button @click="qd">确认</button>
        <button @click="gb">取消</button>
        
      </template>
    </DiaLog>
  </div>
</template>
<script>
import MyTable from './components/MyTable.vue'
import DiaLog from './components/Dialog.vue'
export default {
  name: 'app',
  components: {
    MyTable,
    DiaLog
  },
  data () {
    return {
      showFlag: false,
      fromData: {
        name: '',
        age: '',
        id:''
      },
      list: [
        { id: 1, name: '妮妮', age: 18 },
        { id: 2, name: '风间', age: 19 },
        { id: 3, name: '小新', age: 17 },
      ],
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    del (id) {
      this.list = this.list.filter(item => item.id != id)
    },
    lookHandel (obj) {
      this.showFlag = true
      //深拷贝下
      this.fromData = JSON.parse(JSON.stringify(obj))
    },
    //关闭姆态框
    gb () {
      this.showFlag = false
      this.fromData = {
        name: '',
        age: ''
      }
    },
    qd () {
      const obj1 = this.list.find(item => item.id == this.fromData.id)
      obj1.name = this.fromData.name
      obj1.age = this.fromData.age
      //清空
      this.fromData = {
        name: '',
        age: ''
      }
      //关闭模态框
      this.showFlag = false
    },
   
  }
}
</script>
<style lang='less'  scoped>
</style>
